<template>
  <div class="box">
    <div class="box-centent">
      <div class="title">山西省职业技能学培考鉴就一体化服务平台</div>
      <div class="denglu">
        <img src="@/assets/img/image 774@2x.png" />
        <div class="nr">
          <div>
            <span class="loginZW"> 登 录 系 统</span>
            <span class="loginYW"> LOGIN</span>
          </div>
          <div class="login-input">
            <!-- 用户名输入框 -->
            <el-form-item class="input-group">
              <el-input
                placeholder="请输入账号"
                v-model="loginForm.username"
                size="large"
              >
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 密码输入框 -->
            <el-form-item class="input-group">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="loginForm.password"
                size="large"
                show-password
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 验证码输入框 -->
            <el-form-item class="input-group verification-group">
              <el-input
                placeholder="请输入验证码"
                v-model="loginForm.captcha"
                size="large"
              >
                <template #prefix>
                  <el-icon><Key /></el-icon>
                </template>
                <template #append>
                  <div class="verification-code">A B C D</div>
                </template>
              </el-input>
            </el-form-item>

            <!-- 记住密码和忘记密码选项 -->
            <div class="form-options">
              <el-checkbox v-model="loginForm.rememberMe" label="记住密码" />
              <a href="#" class="forgot-password">忘记密码</a>
            </div>

            <!-- 登录按钮 -->
            <el-button
              type="primary"
              class="login-button"
              @click="login"
              size="large"
            >
              登 录
            </el-button>
          </div>
        </div>
      </div>
      <div class="foot">
        <div>指导单位：山西省职业技能鉴定协会</div>
        <div>技术支持单位：商予科技（北京）有限公司</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import useStore from "@/store";
import { useRouter } from "vue-router";
import { User, Lock, Key } from "@element-plus/icons-vue";

const router = useRouter();
const { user } = useStore();
const state = reactive({
  userType: "personal",
  loginForm: {
    username: "zm",
    password: "123456",
    captcha: "",
    rememberMe: false,
  },
});
let { userType, loginForm } = toRefs(state);
function login() {
  console.log(loginForm.value);
  // 使用store里的登录方法

  user.login(state.loginForm).then((res) => {
    if (res) {
      console.log("登录成功");
      router.push("/");
    }
  });
}
</script>

<style scoped lang="scss">
.box {
  border-top: 1px solid transparent;
}
.box::before {
  content: "";
  background: url("@/assets/img/bg@2x.png");
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.box-centent {
  width: 1300px;
  margin: auto;
  margin-top: 153px;
}
.title {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 61px;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
  color: #0b365e;
}
.denglu {
  background: url("@/assets/img/Rectangle 1314@2x.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; // 或者使用具体的尺寸如 100% 100%
  margin-top: 50px;
  width: 100%;
  height: 600px;
  padding: 66px 50px;
  box-sizing: border-box;
  display: flex;
  img {
    width: 635px;
    height: 468px;
    margin-right: 45px;
  }
  .nr {
    padding-top: 34px;
    .loginZW {
      font-size: 30px;
      font-weight: bold;
      color: #0b365e;
    }
    .loginYW {
      font-size: 26px;
      font-weight: bold;
      color: #0b365e;
    }
    .login-input {
      margin-top: 32px;
      width: 420px;

      .input-group {
        margin-bottom: 24px;

        :deep(.el-input__wrapper) {
          width: 100%;
        }

        &.verification-group {
          :deep(.el-input-group__append) {
            background-color: #f5f5f5;
            font-weight: bold;
            letter-spacing: 2px;
          }

          .verification-code {
            padding: 0 10px;
          }
        }
      }

      .form-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        :deep(.el-checkbox) {
          color: #666;
        }

        .forgot-password {
          color: #007bff;
          text-decoration: none;
          font-size: 14px;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .login-button {
        width: 100%;
        margin-top: 10px;
      }
    }
  }
}
.foot {
  width: 100%;
  text-align: center;
  font-size: 14px;
  margin-top: 81px;
  color: #37374d;
}
</style>
